<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NarbarTest</title>
    <link href="../../static/css/common/bootstrap.css"  rel="stylesheet">
    <link href="../../static/css/common/cmxform.css"  rel="stylesheet">
    <link href="../../static/css/common/screen.css"  rel="stylesheet">
    <link href="../../static/css/common/default/easyui.css"  rel="stylesheet">
    <link href="../../static/css/common/icon.css"  rel="stylesheet">
    <link href="../../static/css/common/bootstrap-sortable.css"  rel="stylesheet">
    <link href="../../static/css/common/jquery-ui.css"  rel="stylesheet">
    <link href="../../static/css/common/jquery-ui.min.css"  rel="stylesheet">
    <link href="../../static/css/common/jquery-ui.structure.css"  rel="stylesheet">
    <link href="../../static/css/common/jquery-ui.theme.css"  rel="stylesheet">
    <link href="../../static/css/common/jquery-ui.theme.min.css"  rel="stylesheet">
    <link href="../../static/css/common/echart/codemirror.css" rel="stylesheet">
    <link href="../../static/css/common/echart/monokai.css" rel="stylesheet">
     <link href="../../static/css/common/echart/bootstrap-theme.css"  rel="stylesheet">
    <link href="../../static/css/common/echart/carousel.css"  rel="stylesheet">
    <link href="../../static/css/common/echart/echartsHome.css" rel="stylesheet">

    <!--<link href="../../static/css/echart/jquery-ui.structure.css"  rel="stylesheet">-->
    <!--<link href="../../static/css/echart/jquery-ui.theme.css"  rel="stylesheet">-->
    <!--<link href="../../static/css/echart/jquery-ui.theme.min.css"  rel="stylesheet">-->
    <!--<script src="echarts.min.js"></script>-->
    <script src="../../static/js/echarts.min.js"></script>
    <script src="../../static/js/common/jquery-1.7.min.js"></script>
</head>
<body>



    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">caoyuanTools</a>

                <div class="nav-collapse">
                    <ul class="nav">
                        <li id="select"><a href="#">task1</a></li>
                        <li id="qa"><a href="#">task2</a></li>
                        <li id="about"><a href="#">task3</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>

    <div class="container" id="testdiv" >
        <div class="row" id ="btn" >
            <input class="btn btn-default" type="button" value="显示报表" onclick="onchartClick()">
        </div>
        <div class="row" id="testchart" style="width: 600px;height:400px;"></div>

    </div>
    <script type="text/javascript">
        function mychart(legendData,xAxisData,seriesData,title){
                // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('testchart'),'macarons');

            // 指定图表的配置项和数据
            option = {
                        title : {
                            text: '未来一周气温变化',
                            subtext: '纯属虚构'
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:[]
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : []
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                axisLabel : {
                                    formatter: '{value} °C'
                                }
                            }
                        ],
                        series : [

                        ]
                    };


            option.legend.data=legendData;
            option.title.text=title
            option.xAxis[0]["data"]=xAxisData
            option.series=seriesData

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            <!--myChart.setSeries(seriesData);-->

        }




         function onchartClick(){

            $.post("/test",function(data){
                <!--alert("hello")-->
                console.log(data)
                alert(data)
                var legendData=["hello","hi"]; //可以通过这种方法设置对应属性的值

                var titleText="改变标题";//改变标题属性

                var xAxis=["1","2","3","4"];//改变坐标值
                var seriesData=[data]

                mychart(legendData,xAxis,seriesData,titleText)
            })
         }
    </script>



</body>
</html>